<script setup lang="ts">
// 计划组
import {message} from "ant-design-vue";
import dayjs from "dayjs";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const props = defineProps({
  rows: {
    type: Array,
    default: () => []
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: ''
  },
});
const emit = defineEmits([
    "loadGroup"
]);
const visible = ref(false);
const handle = () => {
  if (props.rows.length === 0) {
    message.error("请选择需要批量处理的数据！");
    return;
  }
  visible.value = true;
  loadGroup();
};
const data = ref<any[]>([]);
const loadGroup = () => {
  WxtUtils.campaignGroupFindList(props.bizCode).then(res => {
    data.value = res.data.data.list;
    campaignGroupName.value = '计划组_' + dayjs().format('YYYYMMDD') + '_' + dayjs().format('HHmmss');
  });
};
const updateGroup = () => {
  if (current.value === 1) {
    WxtUtils.campaignGroupAdd(campaignGroupName.value, props.bizCode).then(res => {
      if (res.data.info.ok !== true) {
        message.error(res.data.info.message)
        return;
      }
      campaignGroupId.value = res.data.data.campaignGroupId;
      loadGroup();
      emit("loadGroup");
      update();
    });
  }else {
    update();
  }
};
const update = ()=>{
  const campaignIds: string[] = props.rows.map((r: any) => r.campaignId);
  if (!campaignGroupId.value) {
    message.error("请选择计划组！");
    return;
  }
  WxtUtils.campaignGroupUpdate(campaignGroupId.value, campaignIds, WxtBizCode.关键字推广).then(res => {
    visible.value = false;
    if (res.data.info.ok !== true) {
      message.error(res.data.info.message)
      return;
    }
    message.success("批量添加到计划组成功！");
  });
}
const current = ref(0);
const campaignGroupName = ref('计划组_' + dayjs().format('YYYYMMDD') + '_' + dayjs().format('HHmmss'));
const campaignGroupId = ref(null);
const radio1 = ref(1);
const radio2 = ref(0);
watch(() => radio1.value, (v) => {
  if (v) {
    current.value = 0;
    radio2.value = 0;
  }
})
watch(() => radio2.value, (v) => {
  if (v) {
    current.value = 1;
    radio1.value = 0;
  }
})
</script>

<template>
  <div @click="handle">
    <slot>
      <a-button size="small" type="primary" ghost>计划组</a-button>
    </slot>
  </div>
  <wxt-modal :width="500" :style="{
    top: 'revert-layer',
  }" title="批量添加到计划组" v-model:visible="visible"
  >
    <a-alert type="warning" show-icon message="计划组仅支持归属当前营销场景下的计划" style="margin-bottom: 20px;"/>
    <a-row style="padding-bottom: 20px;">
      <a-col>
        <a-radio v-model:checked="radio1" @change="current==0">选择已有</a-radio>
      </a-col>
      <a-col flex="1">

      </a-col>
      <a-col>
        <a-select style="width: 220px;" :disabled="current!=0" v-model:value="campaignGroupId"
                  placeholder="请选择计划组"
        >
          <a-select-option v-for="(item,index) in data" :value="item.campaignGroupId">{{
              item.campaignGroupName
            }}
          </a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-row>
      <a-col>
        <a-radio v-model:checked="radio2">新建计划组</a-radio>
      </a-col>
      <a-col flex="1">

      </a-col>
      <a-col>
        <a-input :disabled="current!=1" style="width: 220px;" v-model:value="campaignGroupName"
                 placeholder="请输入计划组名称"
        />
      </a-col>
    </a-row>
    <a-divider/>
    <div style="text-align: right;">
      <a-space>
        <a-button @click="visible=false">取消</a-button>
        <a-button type="primary" @click="updateGroup()">确定</a-button>
      </a-space>
    </div>
  </wxt-modal>
</template>

<style scoped>

</style>
